<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      @closeDialog="closeDialog"
    >
      <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="formLabelAlign"
      >
        <el-form-item label="文件名称：">
          <el-input
            placeholder="请输入文件名称"
            v-model="formLabelAlign.name"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <el-form-item label="文件来源：">
          <el-input v-model="formLabelAlign.type" maxlength="200"></el-input>
        </el-form-item>
        <el-form-item label="文件大小：">
          <el-input v-model="formLabelAlign.size" maxlength="200"></el-input>
        </el-form-item>
        <slot></slot>
        <el-form-item label="添加标签：">
          <div class="tag">
            <tagsGroup
              ref="tagsGroup"
              :isEdit="true"
              :showTagsArr="showTagsArr"
              @changeTagsArr="changeTagsArr"
            ></tagsGroup>
          </div>
        </el-form-item>
      </el-form>
      <div class="upload">
        <span>上传文件：</span>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          accept=".jpg,.png"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
      <div class="footer flex-center">
        <div class="cancel" @click="dialogVisible = false">取消</div>
        <div class="confirm" @click="submit()">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tagsGroup from './tagsGroup'
export default {
  components: {
    tagsGroup,
  },
  data() {
    return {
      dialogVisible: false,
      title: '审核',
      fileList: [],
      labelPosition: 'right',
      formLabelAlign: {
        name: 'hyb',
        type: '这里是文件的来源',
        size: '2.68MB',
      },
      showTagsArr: [1, 2, 3],
    }
  },
  created() {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    beforeUpload(file) {
      console.log(file)
    },
    submit() {
      console.log(this.formLabelAlign)
      this.dialogVisible = false
    },
    cancel() {},
    closeDialog() {
      this.$emit('closeDialog', this.dialogVisible)
    },
    openDialog() {
      this.dialogVisible = true
    },
    //  显示标签 对应数组
    changeTagsArr(arr) {
      this.showTagsArr = arr
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  color: #ffffff;
  font-size: 16px;
  width: 7.76rem;
  background: #474747;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.45);
  border-radius: 5px;
  .el-dialog__header {
    padding: 16px;
    background: #3e3d3d;
  }
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    color: #ffffff;
  }
  .el-form-item__label {
    color: #ffffff;
  }
  .el-input__inner {
    background-color: rgba(56, 56, 56, 1);
    border: none;
  }
  input {
    color: #ffffff;
  }
  input::-webkit-input-placeholder {
    color: #ffffff;
  }
  input::-moz-input-placeholder {
    color: #ffffff;
  }
  input::-ms-input-placeholder {
    color: #ffffff;
  }
  .el-select {
    color: #ffffff;
    width: 100%;
    background-color: rgba(56, 56, 56, 1);
    .el-input__inner {
      background-color: rgba(56, 56, 56, 1);
    }
  }
  .footer {
    margin-top: 30px;
    color: #ffffff;
    margin-right: 30px;
    justify-content: flex-end;
    .cancel {
      text-align: center;
      width: 120px;
      height: 38px;
      line-height: 38px;
      background: #62656c;
      border-radius: 5px;
    }
    .confirm {
      margin-left: 20px;
      text-align: center;
      width: 120px;
      height: 38px;
      line-height: 38px;
      background: #1890ff;
      border-radius: 5px;
    }
  }
}
.tag {
  padding: 8px;
  height: 98px;
  width: 100%;
  background: #3e3d3d;
  border-radius: 5px;
  margin-bottom: 6px;
}

.upload {
  display: flex;
  span {
    margin-left: 20px;
    margin-right: 10px;
  }
}
</style>
